<template>
  <!-- forget -->
  <div class="forget-box">
    <heading-title title="Forgot Your Password?" />
    <div class="forget-container">
			<p class="tips">{{'Please enter your email address below to receive a password reset link.'}}</p>
      <span>EMAIL</span>
      <div>
        <input v-model="info.email" type="text" />
        <p v-show="emailShow">{{ "This is a required field." }}</p>
      </div>
      <span>Please type the letters and numbers below</span>
      <div>
        <input v-model="info.password" type="text" />
        <p v-show="passwordShow">{{ "This is a required field." }}</p>
      </div>
			<div>
				<img src="@/assets/Content/1.png" alt="">
				<span>{{'Reload captcha'}}</span>
			</div>
      <div class="btn" @click="submit">
        {{ "Reset My Password" }}
      </div>
      <p @click="$router.push('/login')" class="forget-text">{{ "Go BACK" }}</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      info: {
        checked: false
      },
      firstShow: false,
      lastShow: false,
      emailShow: false,
      passwordShow: false,
      confirmShow: false,
    };
  },

  components: {
    HeadingTitle: () => import("_c/HeadingTitle")
  },

  computed: {},

  beforeMount() {},

  mounted() {},

  methods: {
    // 登录
    submit() {
      if (!this.info.email) this.emailShow = true;
      else this.emailShow = false;
      if (!this.info.password) this.passwordShow = true;
      else this.passwordShow = false;
    }
  },

  watch: {}
};
</script>
<style lang="scss" scoped>
.forget-box {
  .forget-container {
    width: 330px;
    margin: 0 auto 40px;
    & > span {
      font-size: 12px;
      color: #969696;
      &::after {
        content: "*";
        padding-left: 2px;
        color: #969696;
        font-size: 12px;
        margin: 0 0 0 5px;
      }
    }
    input {
      width: 100%;
      height: 30px;
      border: 0;
      border-bottom: 1px solid #e2e2e2;
      margin-bottom: 10px;
      outline: 0;
      font-size: 14px;
      color: #000;
      padding: 5px 0;
      border-radius: 5px;
      &:focus {
        border-bottom-color: #1a1a1a;
      }
    }
    p {
      font-size: 12px;
      color: #e02b27;
			margin: 0;

			&.tips {
				margin-bottom: 29px;
				color: #000;
				line-height: 25px;
				font-size: 14px;
			}
    }
    & > div {
			margin-bottom: 29px;
			img {
				width: 200px;
				vertical-align: middle;
				margin-right: 15px;
			}
			span {
				display: inline-block;
				font-size: 14px;
				cursor: pointer;
				font-weight: 400;
				color: #1a1a1a;
			}
    }
    p.forget-text {
      color: #000;
      text-align: center;
      cursor: pointer;
    }
    div.btn {
      width: 100%;
      height: 50px;
      line-height: 50px;
      background: #000;
      border-color: #000;
      color: #fff;
      font-weight: 500;
      text-align: center;
      cursor: pointer;
      margin-bottom: 15px;
    }
  }
}
</style>
